<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板引擎</title>
</head>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.min.js"></script> -->
<script src="./art-template/art-template.js"></script>
<body>
  
  <div class="contatiner">

  </div>

  <script type="text/html" id="tpl-user">
    <h1>{{name}} --- {{age}} {{@test}}</h1>
    <div>
      {{if folat === 1}} folat === 1
      {{else if folat === 0}} folat === 0
      {{/if}}
    </div>
    <ul>
      {{each hobby}}
        <li>下标:{{$index}} {{$value}}</li>
      {{/each}}
    </ul>
    <h3>{{getTime | filterTime}}</h3>
  </script>
  
  <script src="./jquery-3.6.0/jQuery3.6.js"></script>
  <script type="text/javascript">

    // 定义过滤器
    template.defaults.imports.filterTime = function(val){
      // console.log(val);
      var y = val.getFullYear(),
          m = val.getMonth() + 1,
          d = val.getDate()

      return `${y}年${m}月${d}日`
    }

    // 数据源
    var data = { 
      name: {temp: "xxx"}, 
      age: 18, 
      test: "<h3>测试原文输出</h3>",
      folat: 1,
      hobby: ["吃饭", "睡觉", "打豆豆"],
      getTime: new Date(),
    }

    // 4.调用 template 函数
    var htmlstr = template("tpl-user", data);
    // console.log(htmlstr);

    

    // 添加DOM
    $(function(){
      $(".contatiner").html(htmlstr)
    })
  </script>
</body>
</html>